<template>
  <div class="equipment_state">
    <el-dialog
      title="设备状态"
      :visible.sync="dialogVisible"
      width="70%"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="wrapper" v-loading="isLoading">
        <div class="equipment_list table_container">
          <el-table
            :data="deviceList"
            border
            ref="deviceList"
            max-height="440"
            @current-change="handleCurrentChange"
            class="table_dialog">
            <el-table-column
              align="center"
              width="40">
              <template slot-scope="scope">
                <el-radio v-model="eqId" :label="scope.row.id">{{''}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="number"
              min-width="80"
              align="center"
              label="设备编号"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="name"
              min-width="80"
              align="center"
              label="设备名称"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              width="80"
              align="center"
              label="检查状态"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.uploadTemplate">未检查</span>
                <span v-else-if="scope.row.checkRecord">已检查</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="submitter"
              :resizable="false"
              min-width="80"
              align="center"
              label="检查人"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="equipment_detail">
          <equipment-template ref="EquipmentTemplate"></equipment-template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EquipmentTemplate from '@/components/Template/EquipmentTemplate'

export default {
  name: 'EquipmentState',
  data() {
    return {
      isLoading: false,
      dialogVisible: false, // 是否显示弹框
      eqId: '' // 选中设备ID
    }
  },
  components: {
    EquipmentTemplate
  },
  computed: {
    // 设备列表
    deviceList() {
      return this.$store.state.workshopBench.deviceList || []
    },
  },
  methods: {
    // 打开时初始化
    openDialog() {
      this.dialogVisible = true
      this.init()
    },
    // 初始化
    init() {
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/device/device/checkdevice',
        module: 'workshopBench',
        state: 'deviceList'
      }).then(() => {
        // 设置默认选中设备
        if (this.deviceList.length > 0) {
          this.eqId = this.deviceList[0].id
          this.changeTemplate()
        } else {
          this.$message.error({
            message: '你所在工作中心没有正常状态的设备可以检查',
            duration: 1500,
            center: true
          })
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 单行选中
    handleCurrentChange(row) {
      if (!row || this.eqId === row.id) return
      if (this.$refs.EquipmentTemplate.isEdit) {
        this.$confirm('检测到未保存的内容, 是否放弃修改?', '关闭提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改',
          confirmButtonClass: 'el-button--danger',
          customClass: 'mes_confirm',
          type: 'warning'
        }).then(() => {
          // 保存
          this.submit(true)
        }).catch(action => {
          if (action === 'cancel') {
            // 放弃修改
            this.eqId = row.id
            this.changeTemplate()
          } else {
            // 关闭
            this.$refs.deviceList.setCurrentRow()
          }
        })
      } else {
        this.eqId = row.id
        this.changeTemplate()
      }
    },
    // 切换检查显示记录
    changeTemplate() {
      let templateItem = this.deviceList.find(item => item.id === this.eqId) || {}
      // 如果未记录过使用空模板，记录过使用记录
      let template = templateItem.checkRecord || templateItem.uploadTemplate || '[]'
      this.$refs.EquipmentTemplate.openDialog(JSON.parse(template))
    },
    // 提交
    submit(type) {
      let templateList = JSON.stringify(this.$refs.EquipmentTemplate.templateList)
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/device/device/saverecord',
        noCommit: true,
        data: {
          deviceId: this.eqId,
          record: templateList
        }
      }).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功',
          duration: 1500,
          center: true
        })
        if (type !== true) {
          this.dialogVisible = false
        } else {
          let templateItem = this.deviceList.find(item => item.id === this.eqId) || {}
          templateItem.checkRecord = templateList
          this.$refs.deviceList.setCurrentRow()
          this.$refs.EquipmentTemplate.isEdit = false
        }
      })
    },
  }
}
</script>

<style lang="less">
  .equipment_state {
    .mes_dialog .el-dialog__body{
      padding: 0px 20px;
    }
    .equipment_list {
      .el-radio__label {
        display: none;
      }
    }
  }
</style>
<style scoped lang="less">
  .equipment_state {
    .wrapper {
      display: flex;
      justify-content: space-between;
      .equipment_list {
        flex: 0 0 35%;
        overflow: hidden;
        box-sizing: border-box;
        padding: 20px 10px 20px 0px;
        border-right: 1px solid #dbe1e8;
      }
      .equipment_detail {
        flex: 0 0 65%;
        overflow: hidden;
        padding: 20px 0px 20px 10px;
        box-sizing: border-box;
      }
    }
  }
</style>
